<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<!-- <body>
    <div class="box"></div>
    <script>
        var templateStr = "<h3>我觉得{{name}}好{{appear}}</h3>";

        var data = {
            name: "道枝骏佑",
            appear: "帅",
        }


        function render(templateStr, data) {
            return templateStr.replace(/\{\{(\w+)\}\}/g, function (findStr, $1) {
                // 这里有一个细节 ES6新增属性 -- data允许动态属性作为属性出现在对象中
                return data[$1]; // 相当于 data.属性名
            })
        };

        let box = document.querySelector(".box");
        var result = render(templateStr, data);
        console.log(result);

        box.innerHTML = result;
    </script>
</body> -->

<body>
    <script>
        var arr = [
            ["text", "<h1>我买了一个"],
            ["name", "thing</h1>"],
        ];

        var data = {
            thing: "手机",
        }
    </script>
</body>

</html>